<template>
	<view class="setting-info-wrapper">
		<view class="set-user-info conteainer-public-style mg24">
			<view class="set-user-item flex-c-s b-b-1" @click="setAvarta">
				<text class="fz26">头像</text>
				<view class="flex-c">
					<image v-if="!userInfo.portrait" src="/static/images/default-img.png" style="width: 60rpx;height: 60rpx;border-radius: 30rpx;" mode=""></image>
					<image v-if="userInfo.portrait" :src="userInfo.portrait" style="width: 60rpx;height: 60rpx;border-radius: 30rpx;" mode=""></image>
					<uni-icons type="forward" size="22" color="#999"></uni-icons>
				</view>
			</view>
			<view class="set-user-item flex-c-s b-b-1">
				<text class="fz26">昵称</text>
				<view class="user-nickname flex-c" @click="setNickName">
					<text class="fz28 color666">{{userInfo.nickName || ''}}</text>
					<uni-icons type="forward" size="22" color="#999"></uni-icons>
				</view>
			</view>
			<view class="set-user-item flex-c-s ">
				<text class="fz26">手机号</text>
				<view class="user-nickname flex-c" @click="setPhone">
					<text class="fz28 color666">{{userInfo.phone || ''}}</text>
					<uni-icons type="forward" size="22" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="set-user-info conteainer-public-style mg24">
			<view class="set-user-item flex-c-s b-b-1" @click="setLoginPassword">
				<text class="fz26">修改登陆密码</text>
				<view class="user-nickname flex-c"> 
					<uni-icons type="forward" size="22" color="#999"></uni-icons>
				</view>
			</view>
			<!-- <view class="set-user-item flex-c-s ">
				<text class="fz26">设置/修改支付密码</text>
				<view class="user-nickname flex-c"> 
					<uni-icons type="forward" size="22" color="#999"></uni-icons>
				</view>
			</view> -->
		</view> 
		<view>
		    <t-cropper
		      mode="ratio"
		      :imageUrl="imageUrl"
		      :width="200"
		      :height="200"
			  :maxWidth="500"
			  :maxHeight="500"
		      :radius="0"
		      @cancel="onCancel"
		      @confirm="onConfirm"
		    ></t-cropper>
		   <!-- <view class="preview">
		      <image
		        v-for="(item, index) in resultUrl"
		        :key="item.id"
		        class="images"
		        @click="prviewImgae(index, item.url)"
		        :src="item.url"
		      />
		    </view>
		    <button class="button" type="primary" @click="select">选择图片</button> -->
		  </view>
		  <!-- <button class="button" type="primary" @click="test">选择图片</button> -->
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'

import { uploadAvarta } from '@/http/my' 
import { updateUserLoginInfo } from '@/utils/tools'
//import Tcropper from '@/uni_modules/t-cropper/components/t-cropper/t-cropper.vue'

import type { IUserInfo } from '@/types'
 
export default defineComponent({
	components: {
		//Tcropper
	},
	setup() {
		const state = reactive({
			userInfo: {} as IUserInfo,
			headImage: ''
		})
		const setNickName = () => {
			uni.navigateTo({
				url: `/pages/myPackge/setting/setNickName?name=${state.userInfo.nickName}`
			})
		}
		
		onShow(() => {
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					state.userInfo = JSON.parse(res.data || '{}') 
				}
			})
		})
		
		const setPhone = () => {
			uni.navigateTo({
				url: `/pages/myPackge/setting/setPhone?phone=${state.userInfo.phone}`
			})
		}
		
		const setLoginPassword = () => {
			uni.navigateTo({
				url:'/pages/myPackge/setting/setLoginPassword'
			})
		}
		
		const setAvarta  = () => {
			uni.chooseImage({
			    count: 1,
			    success: async (file: any) => { 
					 model.imageUrl = file.tempFilePaths[0];
					// const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'img/')
					// if(success) {
					// 	state.headImage = data
					// 	console.log(success,data, 89);
					// } else {
					// 	uni.showToast({icon:'none', title: data})
					// }
			    }
			})
		}
		
		
		
		const model = reactive({
		  imageUrl: "",
		  resultUrl: [] as any[],
		});
		
		let { resultUrl } = toRefs(model);
		
		const select = () => {
		  uni.chooseImage({
		    count: 1,
		    success: (res) => {
		      model.imageUrl = res.tempFilePaths[0];
		    },
		  });
		};
		
		const onCancel = () => {
		  model.imageUrl = "";
		};
		
		const onConfirm = async (res: any) => {
			// 设置url的值，显示控件
			model.imageUrl = "";
			uni.showLoading({
				title: '正在上传...'
			})
			const {success,data} = await ossUpload(res.tempFilePath, res.tempFilePath, 'img/')
			if(success) { 
				let result = await uploadAvarta({portrait: data}) 
				if(result.code === 0) {
					updateUserLoginInfo()
					state.userInfo.portrait = data 
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					})
				} else {
					uni.showToast({icon:'none', title: result.msg || '上传失败'})
				}
				uni.hideLoading() 
			} else {
				uni.showToast({icon:'none', title: data})
			}
			uni.hideLoading() 
		};
		
		const prviewImgae = (index: number, url: string) => {
			uni.previewImage({
				current: index, // 当前资源下标
				urls: [url],
			})
		};
		
		const test = () => {
			const pramas = {
				cusid: '56379104816DULG',
				appid: '00297619',
				version: '12',
				trxamt: '2000',
				body: 'cs',
				reqsn: 'dsdsdfdsf54152fgfd54df',
				charset: 'UTF-8',
				randomstr: 'dsdffghtrrefsf54152fgfd54df',
				signtype: 'RSA',
				sign: 'SaCHuY0RC3Top4/+H5oJbDdS3LuhbaQv2hEbY7E1RhwdK2FOc04sZ+Wp/F2hW7whmXUk/ETnGh+YX+mOHj1+uWtSJauijVVrW479DR7vyH0HoRTQgCBMHKlrHzf1unsxQ50zg+4DVQIMZndOtmwlwOSRkuLfk3+lo/TdaVuRX+Qb8fDtoC8dC3lgfDq77bRKgpAOEGlY3ECCl916HCAC1OxKYks+uTI6c50vNogGDf6fuvFJNpI+lNvkInSasQ1GnDwFgV9DLvvIV/B18e7K9U+YGROLEuZ/569eITznEXW7ieJdcJKiqAbMQkc/BN6lnVQCdiRFsfcBBsT+y3Bp4A=='
			}
			uni.request({
				url: 'https://syb-test.allinpay.com/apiweb/h5unionpay/unionorder',
				success(res) {
					console.log(res);
				},
				data: pramas,
				fail(err) {
					console.log(err);
				}
			})
		}
		
		return {
			prviewImgae,
			onConfirm,
			onCancel,
			select,
			test,
			setPhone,
			setNickName,
			setLoginPassword,
			setAvarta,
			...toRefs(state),
			...toRefs(model),
		}
	}
})
</script>

<style>
	page{ background-color: #f8f8fa;}
</style>

<style lang="scss" scoped>
.setting-info-wrapper{
	.set-user-info{
		padding: 0 24rpx;
		.set-user-item{
			padding: 32rpx 0;
			.fz28{
				margin-right: 12rpx;
			}
		}
	}
}
</style>